<!DOCTYPE html>
<html>
<head>
	<title>{{ the_title }}</title>
	<link rel="stylesheet" href="static/style.css">
	<style>
		body {
            background-image: linear-gradient(#FFDEAD, #AFEEEE);
        }
        p{
        	font-size: 18px;
        	color:#838B8B;
        }
        button{
            line-height:30px;
            margin: 30px;
            width: 130px;
            height: 30px;
            border-radius:13px ;
            outline: none;
            border: none;
            background-image: linear-gradient(120deg, #C1FFC1 0%, #FFC1C1 100%);
            color: #FFFFFF;
        }

        button:hover{
            background-image: linear-gradient(to top, #FFC1C1 0%,#C1FFC1 100%);
        }
	
	</style>
</head>
<body align="center">

    <form method='POST' action='/walkresult'>
    <h1>{{ the_title }}</h1>
    <p>输入所需的起点及终点的结构化地址，即可调用高德步行规划</p>
    <p>密钥为：857979d3c53bde4d00817c3152b9ef18</p>
    <div style="padding: 5px;">
    <input style="height: 30px;width: 250px;" name="start_address" type="text" placeholder="起点地址">
    </div>
    <div style="padding: 5px;">
    <input style="height: 30px;width: 250px;" name="end_address" type="text" placeholder="终点地址">
    </div>
    <div style="padding: 5px;">
    <input style="height: 30px;width: 250px;" name="key" type="password" placeholder="密钥">
    </div>
    <div style="text-align:center;padding: 10px;">
		<button type="submit">开始规划</button>
	</div>
    </form>


</body>
</html>